<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 17:03:15
-->
<template>
  <div ref="bottom2_container" style="height:95%"> </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){

const data = [
  { year: '2019-03', 温度: 3, 湿度: 10 },
  { year: '2019-04', 温度: 4, 湿度: 11 },
  { year: '2019-05', 温度: 3.5, 湿度: 13 },
  { year: '2019-06', 温度: 5, 湿度: 17 },
  { year: '2019-07', 温度: 4.9, 湿度: 12 },
  { year: '2019-08', 温度: 6, 湿度: 20 },
  { year: '2019-09', 温度: 7, 湿度: 7 },
  { year: '2019-10', 温度: 9, 湿度: 14 },
  { year: '2019-11', 温度: 13, 湿度: 20 },
];

const dualAxes = new DualAxes(this.$refs.bottom2_container, {
  data: [data, data],
  xField: 'year',
  yField: ['温度', '湿度'],
  geometryOptions: [
    {
      geometry: 'line',
      smooth: false,
      color: '#29cae4',
      stepType: 'vh',
    },
    {
      geometry: 'line',
      color: '#586bce',
      smooth: true,
    },
  ],
});

dualAxes.render();

    } 
  }
}
</script>
